<!-- v-if的增删DOM节点还是v-show的display: none都是只有一个状态，transition会失效。 -->


<template>
	<view>
		
		<!-- 要展开折叠的容器 -->
		<view class="content">
			<view :class="isOpen ? 'content-open' : 'content-close'">
				<view :class="isOpen ? 'item-open' : 'item-close'">
					<view>示例内容1</view>
					<view>示例内容2</view>
					<view>示例内容3</view>
				</view>
			</view> 
		</view>
		<!-- END -->
		
		
		<!-- 按钮组 -->
		<view>
			<button @click="controll()">展开/收起</button>
		</view>
		<!-- END -->
		
	</view>
</template>

<script>
export default {
	
	data() {
		return {
			
			// 是否打开标识
			isOpen: false,
		}
	},
	
	methods: {
		
		/*
		 * 容器展开折叠
		 * @return void
		 */
		controll: function()
		{
			this.isOpen = !this.isOpen
		}
	}
	
}
</script>

<style>

/* 最外层为了能看清随便来点样式 */
.content{ background: #007AFF; }
/* END */
 

/* 外容器样式 */
.content-open {
	height: 400 rpx;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
}
.content-close {
	height: 0;
	transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
}
/* END */


/* 子容器样式 */
.item-open {
	height: 400rpx;
	transition: all 0.4s cubic-bezier(0.25, 1.0, 0.25, 1.0);
}
.item-close {
	opacity: 0;
	height: 0;
}
/* END */

</style>